<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vuex.js"></script>
</head>
<body>
<div id="app">
    <!--<p>{{count}}-->
    <!--<button @click="inc">+</button>-->
    <!--<button @click="dec">-</button>-->
    <!--</p>-->
    {{count}}
</div>
<script>

    const store = new Vuex.Store({
        state: {
            todos: [
                {id: 1, text: '123', done: true},
                {id: 2, text: '654', done: false},
                {id: 3, text: 'ee', done: true},
                {id: 4, text: '6ddd54', done: false}
            ]
        },
//        getter的作用是讲过个组件需要公用的部分写到一起，便于不同组件的重复调用
        getters: {
            doneTodos: function (state) {
                return state.todos.filter(function (item) {
                    return item.done == true;
                })
            },
//            Getters 也可以接受其他 getters 作为第二个参数：
            doneTodoslength: function (state, getters) {
                return  getters.doneTodos.length
            }
        }
    })

    const app = new Vue({
        el: '#app',
        computed: {
            count () {
                return store.getters.doneTodoslength
            }
        }
        /*        methods: {
         inc () {
         store.commit('inc')
         },
         dec () {
         store.commit('dec')
         }
         }*/
    })
</script>
</body>
</html>
